<template>
	<view class="user-page-container">
		<!-- 头部 -->
		<view class="user-top-section" :style="{ background: 'linear-gradient(156deg, #ff8c4c 0%, #FB5904 100%)' }">
			<view class="header-circles">
				<view class="circle-one"></view>
				<view class="circle-two"></view>
			</view>
			<uniStatusBar />
			<!-- 用户信息 -->
			<view class="user-info-card">
				<!-- 未登录 -->
				<view class="user-info" v-if="!isLogin">
					<view class="info-left" @click="setUserInfo">
						<u-avatar :src="imgHost + '/statics/user-re.png'" size="120"></u-avatar>
						<view class="login-prompt">登录/注册</view>
					</view>
					<view class="setting-btn" @click="setUserInfo">
						<u-icon name="setting" color="#606266" size="44"></u-icon>
						<view class="setting-text">设置</view>
					</view>
				</view>

				<!-- 已登录 -->
				<view class="user-info" v-else>
					<view class="info-left">
						<u-avatar :src="userInfo.avatar" size="120" @click="setUserInfo"></u-avatar>
						<view class="info-text">
							<view class="un-text ellipsis">{{ userInfo.name || '匿名用户' }}</view>
							<view class="un-text-desc"
								v-if="(personnelReview === 5 || finishData === 5) && (userStatus !== 2 || enableStatus === 4)">
								<u-tag v-if="enableStatus === 4" text="已禁用" type="info" size="mini" />
								<u-tag v-else-if="userStatus === 0" text="待完善资料" type="warning" size="mini" />
								<u-tag v-else-if="userStatus === 1" text="审核中" type="primary" size="mini" />
								<u-tag v-else-if="userStatus === 3" text="已驳回" type="error" size="mini" />
							</view>
							<view class="un-text-desc" v-else>
								<u-tag :text="userInfo.customerSourceTypeName || '默认类型'" type="success" size="mini"
									mode="plain" />
								<u-tag v-if="vip_data.isSelf" text="VIP会员" type="warning" size="mini" mode="plain"
									style="margin-left: 10rpx;" />
							</view>
						</view>
					</view>
					<view class="setting-btn" @click="setUserInfo">
						<u-icon name="setting" color="#606266" size="44"></u-icon>
						<view class="setting-text">设置</view>
					</view>
				</view>
			</view>
		</view>

		<view class="stats-bar-container" v-if="isLogin">
			<view class="stats-item" v-if="en_token !== aier_en_token" @click="navTo('/pagesT/money/Balance')">
				<view class="value">{{ Number(userInfo.memberBalance) || 0 }}</view>
				<view class="label">余额</view>
			</view>
			<view class="stats-item" @click="navTo('/pagesT/pointsMall/index')">
				<view class="value">{{ userInfo.integral || 0 }}</view>
				<view class="label">积分</view>
			</view>
			<view class="stats-item" @click="navTo('/pagesT/user/DiscountCoupon')">
				<view class="value">{{ userInfo.couponNum || 0 }}</view>
				<view class="label">优惠券</view>
			</view>
			<view class="stats-item" @click="navTo('/pagesT/user/Collection')">
				<view class="value">{{ userInfo.collNum || 0 }}</view>
				<view class="label">收藏</view>
			</view>
		</view>

		<view class="content-section">
			<!-- VIP卡片 -->
			<view class="vip-card" v-if="vip_data.name"
				:style="{ background: 'linear-gradient(90deg, #8e0e15 0%, #550609 100%)' }">
				<view class="vip-info">
					<view class="vip-name">
						<u-icon name="vip" color="#ffe285" size="36" style="margin-right: 16rpx;"></u-icon>
						{{ vip_data.name }}
					</view>
					<view class="desc" v-if="vip_data.vipDiscount === 5">享受全场{{ vip_data.discount - 0 }}折</view>
					<view class="desc" v-else>专享会员权益</view>
				</view>
				<view class="vip-btn" @click="navTo(`/pagesT/user/VipDetail?id=${vip_data.id}`)">
					{{ vip_data.isSelf ? '立即查看' : '立即开通' }}
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>

			<block v-if="personnelReview === 5 && userStatus === 3">
				<u-notice-bar mode="horizontal" :list="['审核失败，原因：' + userInfo.auditFailReason]" :speed="100"
					:volume-icon="false" :more-icon="true"></u-notice-bar>
			</block>

			<!-- 我的订单 -->
			<view class="card-view">
				<view class="card-header" @click="navTo('/pagesT/order/order?state=0')">
					<view class="title">我的订单</view>
					<view class="more">
						<text>查看全部</text>
						<u-icon name="arrow-right" color="#999" size="28"></u-icon>
					</view>
				</view>
				<u-grid :col="4" :border="false">
					<u-grid-item @click="navTo('/pagesT/order/order?state=' + 1)">
						<u-badge v-if="order_num['2'] > 0 && isLogin" type="error" :offset="[10, 20]"
							:count="order_num['2']"></u-badge>
						<image :src="imgHost + '/statics/ic-dfk-red.png'" class="grid-icon"></image>
						<view class="grid-text">待付款</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pagesT/order/order?state=' + 2)">
						<u-badge v-if="order_num['3'] > 0 && isLogin" type="error" :offset="[10, 20]"
							:count="order_num['3']"></u-badge>
						<image :src="imgHost + '/statics/ic-dfh-red.png'" class="grid-icon"></image>
						<view class="grid-text">待发货</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pagesT/order/order?state=' + 3)">
						<u-badge v-if="order_num['4'] > 0 && isLogin" type="error" :offset="[10, 20]"
							:count="order_num['4']"></u-badge>
						<image :src="imgHost + '/statics/ic-dsh-red.png'" class="grid-icon"></image>
						<view class="grid-text">待收货</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pagesT/order/order?state=' + 4)">
						<u-badge v-if="order_num['5'] > 0 && isLogin" type="error" :offset="[10, 20]"
							:count="order_num['5']"></u-badge>
						<image :src="imgHost + '/statics/ic-finish-red.png'" class="grid-icon"></image>
						<view class="grid-text">已完成</view>
					</u-grid-item>
				</u-grid>
			</view>

			<!-- 负责代表信息 -->
			<view class="card-view" v-if="isLogin">
				<view class="representative-header">
					<image :src="imgHost + '/statics/ic-db.png'" class="header-icon"></image>
					<view class="header-title">负责代表信息</view>
				</view>
				<view class="representative-content">
					<view class="info-grid">
						<view class="info-item">
							<text class="label">出货门店：</text>
							<text class="value">{{ userInfo.shopDate.name }}</text>
						</view>
						<view class="info-item">
							<text class="label">业代姓名：</text>
							<text class="value">{{ userInfo.salesManName || '客服' }}</text>
						</view>
						<view class="info-item">
							<text class="label">服务时间：</text>
							<text class="value">全天</text>
						</view>
						<view class="info-item">
							<text class="label">门店电话：</text>
							<text class="value primary-color"
								@click="lianxi(userInfo.salesManMobile || userInfo.shopDate.mobile)">
								{{ userInfo.salesManMobile || userInfo.shopDate.mobile }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 工具与服务 -->
			<view class="card-view">
				<view class="card-header">
					<view class="title">工具与服务</view>
				</view>
				<u-grid :col="4" :border="false">
					<u-grid-item v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/VipList')">
						<image :src="imgHost + '/statics/ic-vip-red.png'" class="grid-icon"></image>
						<view class="grid-text">会员卡</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pagesT/address/address')">
						<image :src="imgHost + '/statics/ic-address-red.png'" class="grid-icon"></image>
						<view class="grid-text">我的地址</view>
					</u-grid-item>
					<u-grid-item v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/DiscountCoupon')">
						<image :src="imgHost + '/statics/ic-coupon-red.png'" class="grid-icon"></image>
						<view class="grid-text">我的优惠券</view>
					</u-grid-item>
					<u-grid-item v-if="en_token !== aier_en_token" @click="goDistribution">
						<image :src="imgHost + '/statics/ic-fen-red.png'" class="grid-icon"></image>
						<view class="grid-text">分销中心</view>
					</u-grid-item>
					<u-grid-item @click="openpop">
						<image :src="imgHost + '/statics/ic-kf.png'" class="grid-icon"></image>
						<view class="grid-text">{{ userInfo.salesManName ? '专属客服' : '客服中心' }}</view>
					</u-grid-item>
					<u-grid-item v-if="en_token === aier_en_token" @click="navTo('/pagesT/money/CustomerBalanceDetail')">
						<image :src="imgHost + '/statics/ic-3.png'" class="grid-icon"></image>
						<view class="grid-text">往来查询</view>
					</u-grid-item>
					<u-grid-item v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/GetCoupon')">
						<image :src="imgHost + '/statics/ix-lj.png'" class="grid-icon"></image>
						<view class="grid-text">领券中心</view>
					</u-grid-item>
					<u-grid-item v-if="en_token !== aier_en_token" @click="navTo('/pagesT/user/Collection')">
						<image :src="imgHost + '/statics/ix-order.png'" class="grid-icon"></image>
						<view class="grid-text">常购清单</view>
					</u-grid-item>
					<u-grid-item @click="navTo('/pagesT/user/needSubmit')">
						<image :src="imgHost + '/statics/ic-xq.png'" class="grid-icon"></image>
						<view class="grid-text">需求提报</view>
					</u-grid-item>
					<u-grid-item v-if="en_token !== aier_en_token" @click="navTo('/pagesT/order/ReturnOrder')">
						<image :src="imgHost + '/statics/ic-service-red.png'" class="grid-icon"></image>
						<view class="grid-text">售后服务</view>
					</u-grid-item>
					<!-- #ifdef MP -->
					<u-grid-item>
						<button class="share-btn" open-type="share">
							<image :src="imgHost + '/statics/ix-tj.png'" class="grid-icon"></image>
							<view class="grid-text">推荐分享</view>
						</button>
					</u-grid-item>
					<!-- #endif -->
				</u-grid>
			</view>
		</view>

		<u-modal v-model="tip_model" @confirm="finishCofirm" @cancel="tipCancel" :show-cancel-button="true"
			content="请先完善资料,再进行购物" confirm-text="去完善" cancel-text="逛逛商城"></u-modal>
		<Tabbar v-model="current"></Tabbar>

		<u-popup v-model="call_show" width="600rpx" mode="center" border-radius="20">
			<view class="call-pop">
				<view class="title">
					<text>专属客户经理</text>
					<view class="close-icon" @click="cancalCall"><u-icon name="close" size="28"
							color="#6c6c6c"></u-icon></view>
				</view>
				<view class="call-ul">
					<view class="call-li">
						<text class="label">客户经理：</text>
						<text class="value">{{ userInfo.salesManName }}</text>
					</view>
					<view class="call-li">
						<text class="label">联系方式：</text>
						<text class="value">{{ userInfo.salesManMobile }}</text>
					</view>
				</view>
				<view class="call-btn primary-btn" @click="lianxi(userInfo.salesManMobile)">一键通话</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Login from '@/components/Login.vue';
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
import { getEnToken } from '@/access/common.js';
import webUrl from '@/config.js';
export default {
	components: {
		Login,
		uniStatusBar
	},
	// 下拉刷新
	onPullDownRefresh() {
		if (this.$store.state.hasLogin) {
			this.getCustomerInfo();
			this.getMyVipCards();
			// 获取分销文字设置
			this.getTxtSetting();
			this.getDistributionSetting();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	data() {
		return {
			imgHost : webUrl.QN_URL,
			tip_model: false,
			call_show: false,
			current: 3,
			distributionSet: {},
			userInfo: {},
			avatar: '',
			vip_data: {},
			vip_num: 0,
			// 爱尔
			aier_en_token: '8ecdecee648713391dc144f29bea5ca7',
			en_token: getEnToken(),
			order_num: {}
		};
	},
	watch: {
		'$store.state.locationObj'(val) {
			if (JSON.stringify(val) === '{}') {
				this.getAuthorizeInfo();
				return;
			}
			if (this.$store.state.hasLogin) {
				this.getCustomerInfo();
			}
		},
		isLogin(val) {
			if (val) {
				// 获取用户详情
				this.getCustomerInfo();
				// 获取分销文字设置
				this.getTxtSetting();
				// 获取分销基础设置
				this.getDistributionSetting();
				this.getOrderStatusNum();
			} else {
				this.vip_data = {};
			}
		}
	},
	computed: {
		// 业代姓名
		salesManName() {
			if (this.$store.state.userStatus.salesManName) {
				return this.$store.state.userStatus.salesManName;
			} else {
				return '客服';
			}
		},
		// 门店电话
		salesManMobile() {
			if (this.$store.state.userStatus.salesManMobile) {
				return this.$store.state.userStatus.salesManMobile;
			} else {
				return this.$store.state.userStatus.enterpriseMobile;
			}
		},
		// 门店
		enterpriseName() {
			return this.$store.state.enterpriseInfo.enterpriseName;
		},
		baseSet() {
			return this.$store.state.baseSet;
		},
		enterprisemobile() {
			return this.$store.state.enterpriseInfo.mobile;
		},
		isLogin() {
			return this.$store.state.hasLogin;
		},
		// 客户审核
		personnelReview() {
			return this.baseSet.personnelReview;
		},
		userStatus() {
			return this.$store.state.userStatus.status;
		},
		enableStatus() {
			return this.$store.state.userStatus.enableStatus;
		},
		// 完善资料 4禁用 5启用
		finishData() {
			return this.baseSet.finishData;
		}
	},
	onLoad() {
		if (JSON.stringify(this.$store.state.locationObj) === '{}') {
			this.getAuthorizeInfo();
			return;
		}
		if (this.$store.state.hasLogin) {
			// 获取分销文字设置
			this.getTxtSetting();
			// 获取分销基础设置
			this.getDistributionSetting();
			// this.avatar = this.$common.getAvator();
		}
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	onShow() {
		if (this.$store.state.hasLogin) {
			// 获取用户详情
			this.getCustomerInfo();
			this.getOrderStatusNum();
		}
	},
	methods: {
		// #ifdef APP-PLUS
		share() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				title: this.baseSet.shop,
				imageUrl: this.baseSet.images,
				success: function (res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function (err) {
					console.log('fail:' + JSON.stringify(err));
				}
			});
		},
		// #endif
		// 设置用户信息
		setUserInfo() {
			if (!(this.finishData === 5 && this.userInfo.status !== 2)) {
				this.navTo('/pagesT/selfconfig/selfconfig');
			} else {
				this.navTo('/pagesT/user/editUserInfo');
			}
		},
		loginSuccess() {
			// this.isLogin = this.$store.state.hasLogin;
			// this.getCustomerInfo();
			// this.getMyVipCards();
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			// console.log(this.hasLogin)
			// return
			if (!this.$store.state.hasLogin) {
				// #ifdef APP-PLUS
				uni.reLaunch({
					url: '/pagesT/public/wxLogin'
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.reLaunch({
					//url: '/pagesT/binding/bindInfo'
					url: '/pagesT/binding/bindPhone'
				});
				//#endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pagesT/public/wxLogin?loginType=2'
				});
				// #endif
			} else {
				uni.navigateTo({
					url
				});
			}
		}, 
		async goDistribution() {
			if (!this.$store.state.hasLogin) {
				// #ifdef APP-PLUS || H5
				uni.reLaunch({
					url: '/pagesT/binding/bindPhone'
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pagesT/binding/bindPhone'
				});
				//#endif
			} else {
				if (this.distributionSet.level && this.distributionSet.level > 0) {
					this.getInfoBusinessman();
				} else {
					this.$api.msg('抱歉，当前商家暂未开启分销功能');
				}
			}
		},
		// 获取文字设置
		async getTxtSetting() {
			this.$u.api.getTxtSetting().then(({ data }) => {
				this.$store.commit('commit_distributionTextSet', data.base_form || {});
			});
		},
		// 获取分销商详情
		async getInfoBusinessman() {
			if (this.userInfo.status !== 2) {
				this.$api.msg('抱歉，您的账号未通过审核');
				return;
			}
			this.$u.api.getInfoBusinessman().then(({ data }) => {
				if (JSON.stringify(data) === '{}') {
					// 不是分销商进入申请分销商页面
					this.goPage('/pagesT/Distribution/ApplyTerm');
				} else {
					if (data.auditStatus === 2) {
						// 进入分销中心页面
						this.goPage('/pagesT/Distribution/Distribution');
					} else {
						this.goPage('/pagesT/Distribution/ApplyAudit?auditStatus=1&applicationCondition=' + data.applicationCondition);
					}
				}
			});
		},
		getDistributionSetting() {
			this.$u.api.getDistributionSetting().then(({ data }) => {
				this.$store.commit('commit_distributionSet', data);
				this.distributionSet = data;
			});
		},
		// 获取我的会员卡
		getMyVipCards() {
			this.$u.api
				.getMyVipCards({
					page: 1,
					pageSize: 1
				})
				.then(({ data, pageTotal }) => {
					if (data.length) {
						this.vip_num = pageTotal;
						this.vip_data = {
							...data[0],
							isSelf: true
						};
					} else {
						this.getAllVipCard();
					}
				});
		},
		// 获取会员列表
		getAllVipCard() {
			this.$u.api
				.getAllVipCard({
					page: 1,
					pageSize: 1
				})
				.then(({ data }) => {
					if (data.length) {
						this.vip_data = data[0];
					}
				});
		},
		//用户订单状态数量统计
		getOrderStatusNum() {
			this.$u.api.getOrderStatusNum().then(res => {
				this.order_num = res.data;
			});
		},
		// 获取用户信息
		getCustomerInfo() {
			this.$u.api.getCustomerInfo().then(({ data }) => {
				uni.stopPullDownRefresh();
				this.userInfo = data;
				if (this.userInfo.status === 2) {
					this.getMyVipCards();
				}
				this.$store.commit('commit_userStatus', data);
				if (this.baseSet.finishDataGo && data.status === 0) {
					this.tip_model = true;
				}
			});
		},
		// 联系客服
		async lianxi(phone) {
			this.cancalCall();
			uni.makePhoneCall({
				phoneNumber: phone || this.enterprisemobile
			});
		},
		cancalCall() {
			this.call_show = false;
		},
		openpop() {
			if (this.userInfo.salesManName) {
				this.call_show = true;
			} else {
				this.lianxi(this.enterprisemobile);
			}
		},
		// 完善资料提示取消
		tipCancel() {
			this.tip_model = false;
		},
		// 跳转完善资料页面
		finishCofirm() {
			this.goPage('/pagesT/user/editUserInfo');
		}
	},
	onShareAppMessage(options) {
		return {
			title: this.$store.state.baseSet.shop,
			path: '/pages/index/index?businessmanId=' + (this.$store.state.userStatus.id || ''),
			success: res => {
				console.log(res);
			}
		};
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) { },
	// 收藏小程序
	onAddToFavorites() { }
	// #endif
};
</script>

<style lang="scss">
page {
	background: linear-gradient(to bottom, #fff8f8, #f5f5f5);
}

.user-page-container {
	.user-top-section {
		position: relative;
		width: 100%;
		height: 450rpx;
		padding: 0 30rpx;
		overflow: hidden;

		.header-circles {
			.circle-one {
				position: absolute;
				top: -60rpx;
				left: -80rpx;
				width: 400rpx;
				height: 400rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 50%;
			}

			.circle-two {
				position: absolute;
				bottom: -100rpx;
				right: -150rpx;
				width: 500rpx;
				height: 500rpx;
				background: rgba(255, 255, 255, 0.08);
				border-radius: 50%;
			}
		}

		.user-info-card {
			position: relative;
			margin-top: 100rpx;
			padding: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			z-index: 2;

			.user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info-left {
					display: flex;
					align-items: center;
				}

				.login-prompt {
					font-size: 36rpx;
					font-weight: 500;
					margin-left: 20rpx;
				}

				.info-text {
					margin-left: 20rpx;

					.un-text {
						font-size: 34rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
						color: #303133;
					}

					.un-text-desc {
						display: flex;
					}
				}
				
				.setting-btn {
					text-align: center;
					.setting-text {
						font-size: 20rpx;
						font-weight: 400;
						color: #606266;
						line-height: 28rpx;
					}
				}
			}
		}
	}

	.stats-bar-container {
		display: flex;
		padding: 30rpx 0;
		margin: -50rpx 30rpx 0 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 3;

		.stats-item {
			flex: 1;
			text-align: center;

			.value {
				font-size: 36rpx;
				font-weight: bold;
				color: #303133;
				font-family: DIN-Medium;
			}

			.label {
				font-size: 24rpx;
				color: #909399;
				margin-top: 8rpx;
			}
		}
	}


	.content-section {
		padding: 0 30rpx;
		margin-top: 20rpx;
		position: relative;
		z-index: 2;
	}

	.vip-card {
		width: 100%;
		padding: 26rpx 40rpx;
		height: auto;
		border-radius: 16rpx;
		color: #ffe285;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-top: 4rpx solid rgba(255, 219, 153, 1);

		.vip-info {
			.vip-name {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
			}

			.desc {
				font-size: 24rpx;
				font-weight: 400;
				margin-top: 10rpx;
				opacity: 0.8;
			}
		}

		.vip-btn {
			display: flex;
			align-items: center;
			height: 48rpx;
			padding: 0 20rpx;
			background: linear-gradient(90deg, #ffbf59 0%, #ff3b2d 100%);
			border-radius: 24rpx;
			color: #ffefc5;
			font-size: 24rpx;
			font-weight: 400;
			white-space: nowrap;
		}
	}

	.card-view {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
			margin-bottom: 10rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #303133;
			}

			.more {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #909399;
			}
		}
		
		.grid-icon {
			width: 56rpx;
			height: 56rpx;
			margin-bottom: 10rpx;
		}

		.grid-text {
			font-size: 24rpx;
			margin-top: 16rpx;
			color: #606266;
		}

		.share-btn {
			border: none;
			outline: none;
			box-shadow: none;
			border-radius: 0;
			background-color: transparent;
			padding: 0;
			margin: 0;
			line-height: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			&:after {
				border: none;
			}
		}
		
		.representative-header {
			height: 72rpx;
			background-position: -24rpx 0, 0 0;
			background-size: 800rpx 99rpx;
			display: flex;
			align-items: center;

			.header-icon {
				width: 33rpx;
				height: 33rpx;
				margin-right: 10rpx;
			}
			.header-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #2a2a2a;
			}
		}
		
		.representative-content {
			padding: 20rpx 10rpx;
			.info-grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 16rpx;
			}
			.info-item {
				font-size: 24rpx;
				.label {
					color: #909399;
				}
				.value {
					color: #303133;
					font-weight: 500;
				}
				.primary-color {
					color: #fa3534;
				}
			}
		}
	}
}

.call-pop {
	.title {
		text-align: center;
		padding: 0 30rpx;
		line-height: 90rpx;
		height: 90rpx;
		font-weight: bold;
		position: relative;

		.close-icon {
			position: absolute;
			font-weight: normal;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.call-ul {
		padding: 0 30rpx 30rpx;

		.call-li {
			line-height: 80rpx;
			height: 80rpx;
		}
	}

	.call-btn {
		width: 100%;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
	}
}
</style>
